<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- CDN 在线Vue链接(服务器炸了) -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->

    <!-- 本地下载 -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <h3>111111111</h3>
        <p>{{ message }}</p>
        <p>{{ count }}</p>
        <p>{{ isLogin }}</p>
        <p>{{ aaa }}</p>
    </div>
    <hr>
    <div id="app1">
        <h3>22222222</h3>
        <p>{{ message }}</p>
        <p>{{ count }}</p>
        <p>{{ isLogin }}</p>
    </div>
</body>
<script>
    //  Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

    // Vue中注意的问题:
    // 1. 如果创建Vue实例(应用)的过程中 没有配置el属性(挂载的元素), 还可以有补救措施 -> 在实例(应用)创建完毕之后 调用$mount(el) => 进行元素挂载
    // 2. 一个Vue实例(应用)只能挂载一个元素,(Vue中一般习惯一个页面创建一个根实例(应用)(body的第一个子元素))
    // 3. 如果想要在页面中使用Vue的数据,必须先在data中挂载  (挂载的数据只能在挂载的元素中使用)

    // 4. 如果没有配置template,默认使用挂载元素的outerHTML结构作为模板
    //    如果配置了template,默认使用template对应的值作为初始模板,



    var vm = new Vue({
        // el: "#app",  //挂载的元素  -> 将模板语法声明式的渲染到 #app 元素中
        data: { // 挂载的数据  ->  可以在挂载的元素中使用(范围)
            message: "Hello Vue!",
            count: 0,
            isLogin: true,
            aaa: 111,
        },
        template: `<div>{{message}}---{{count}}----{{isLogin}}</div>`
    });

    console.log(vm);
    vm.$mount("#app");


    var vm1 = new Vue({
        // el: "#app",  //挂载的元素  -> 将模板语法声明式的渲染到 #app 元素中
        data: { // 挂载的数据  ->  可以在挂载的元素中使用(范围)
            message: "Hello Vue!",
            count: 0,
            isLogin: true,

        }
    });
    vm1.$mount("#app1");








</script>

</html>